<template>
    <div class="table">
        <div class="divSearch">
            <!--搜索框-->
            <Row>
                <!--根据需求删除不不要查询条件-->
                <Col :lg="{span:1}" :md="{span:3}" :sm="{span:4}" :xs="{span:4}" class="searchLabel">
                    <label>填报年度:</label>
                </Col>
                <Col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 150px" @on-change="getPageData()" class="searchInput">
                    <Option value="">全部</Option>
                    <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select>
                </Col>
                <Col :lg="{span:1}" :md="{span:3}" :sm="{span:4}" :xs="{span:4}" class="searchLabel">
                    <label>时间周期:</label>
                </Col>
                <Col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <Select v-model="searchModel.TimesType" placeholder="全部" style="width: 150px" @on-change="getPageData()" class="searchInput">
                        <Option value="">全部</Option>
                        <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-search" type="primary" @click="getPageData()" class="searchButton">查询</Button>
                </Col>
            </Row>
        </div>
        <Row>
            <Col>
                <Table :context="self" ref="table" :stripe=true :border=true :columns="TableHeader" :data="datas.rows" size="large" :height="clientHeight">
                </Table>
            </Col>
        </Row>
        <Row>
            <Col span="24">
            <Page class="pageComponent"  :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
            </Col>
        </Row>
        <!--**********************************数据编辑框***************************************************************-->
        <Modal v-model="showType" :mask-closable="false" width="1200" :styles="{top: '20px'}">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">主要蔬菜生产情况填报表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <Tabs type="card" @on-click="getTab">
                <Tab-pane v-for="tabPane in TabTitleList" :label="tabPane.SortName" :name="tabPane.SortCode" :key="tabPane.SortCode">
                    <table class="reportTable" style="padding:5px;width:99%">
                    <thead>
                            <tr>
                                <td rowspan="2" width="160px">种类</td>
                                <td rowspan="2">播种面积</td>
                                <td rowspan="2">总产量</td>
                                <td colspan="4">其中</td>
                                <td rowspan="2">销售量</td>
                                <td rowspan="2">平均价格</td>
                            </tr>
                            <tr>
                                <td>露地蔬菜播种面积</td>
                                <td>露地产量</td>
                                <td>设施播种面积</td>
                                <td>设施产量</td>
                            </tr>
                        </thead>
                        <tr v-for="item in tabPane.list" :key="item.ItemName">
                            <td style="padding-left: 5px;">{{item.ItemName}}</td>
                            <td>
                                <Input v-model="item.PlantArea"></Input>
                            </td>
                            <td>
                                <Input v-model="item.OutTotal"></Input>
                            </td>
                            <td>
                                <Input v-model="item.AirPlantArea"></Input>
                            </td>
                            <td>
                                <Input v-model="item.AirOutTotal"></Input>
                            </td>
                            <td>
                                <Input v-model="item.FacilityArea"></Input>
                            </td>
                            <td>
                                <Input v-model="item.FacilityOutTotal"></Input>
                            </td>
                            <!--全年销量-->
                            <td>
                                <Input>{{item.SaleNumber}}</Input>
                            </td>
                            <td>
                                <Input>{{item.AvgPrice}}</Input>
                            </td>
                        </tr>
                    </table>
                    <div style="text-align:right;padding-top:10px">
                        <Button type="primary" @click="save()">保存</Button>
                        <Button type="ghost" @click="cancel()" style="margin-left: 5px">取消</Button>
                    </div>
                </Tab-pane>
            </Tabs>
            <div slot="footer">
                <Alert style="margin-top:5px;text-align:left" banner type="error">
                    填报说明: 1.全省范围内从乡（镇）推广站起，逐级全面统计，由州（市）汇总后上报。 2.
                    <span style="color:red">蔬菜累计播种面积合计=露地蔬菜累计播种面积+小棚蔬菜累计播种面积+大中棚蔬菜累计播种面积+温室蔬菜累计播种面积。</span> 3. 蔬菜生产产量指当季生产的总的产量。
                    <span slot="desc">
                        </span>
                </Alert>
            </div>
        </Modal>
        <!--**********************************数据查看框***************************************************************-->
        <Modal v-model="ViewType" :mask-closable="false" width="1200">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">蔬菜生产情况填报表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <table class="reportTable" style="padding:5px;width:97%">
                <tr>
                    <td rowspan="2" width="20%">种类</td>
                    <td rowspan="2" width="10%">播种面积</td>
                    <td rowspan="2" width="10%">总产量</td>
                    <td colspan="4" width="40%">其中</td>
                    <td rowspan="2" width="10%">销售量</td>
                    <td rowspan="2" width="10%">平均价格</td>
                </tr>
                <tr>
                    <td width="10%">露地蔬菜播种面积</td>
                    <td width="10%">露地产量</td>
                    <td width="10%">设施播种面积</td>
                    <td width="10%">设施产量</td>
                </tr>
            </table>
            <div style="height:450px;overflow-y:scroll;width:100%">
                <table v-for="tabPane in TabTitleList" :key="tabPane.SortName"  style="padding:5px;width:1144px" class="TabTable">
                    <tr>
                        <td>{{tabPane.SortName}}</td>
                        <!-- <td v-for="item in tabPane.list" style="border:1px solid #FF0000;width:1100px">-->
                        <td width="95%" style="border-top:none;border-bottom:none">
                            <table class="ItemTable">
                                <tr v-for="item in tabPane.list" :key="item.ItemName" >
                                    <td style="width:171px">{{item.ItemName}}</td>
                                    <td style="width:115px">{{item.PlantArea}}</td>
                                    <td style="width:115px">{{item.OutTotal}}</td>
                                    <td style="width:114px">{{item.AirPlantArea}}</td>
                                    <td style="width:114px">{{item.AirOutTotal}}</td>
                                    <td style="width:114px">{{item.FacilityArea}}</td>
                                    <td style="width:114px">{{item.FacilityOutTotal}}</td>
                                    <td style="width:114px">{{item.SaleNumber}}</td>
                                    <td style="width:114px">{{item.AvgPrice}}</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <br/>
            </div>
            <div slot="footer">
                <Alert style="margin-top:5px;text-align:left" banner type="error">
                    填报说明: 1.全省范围内从乡（镇）推广站起，逐级全面统计，由州（市）汇总后上报。 2.
                    <span style="color:red">蔬菜累计播种面积合计=露地蔬菜累计播种面积+小棚蔬菜累计播种面积+大中棚蔬菜累计播种面积+温室蔬菜累计播种面积。</span> 3. 蔬菜生产产量指当季生产的总的产量。
                    <span slot="desc">
                        </span>
                </Alert>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                self: this,
                TableCodeList: this.GetGroupDict("ReportTableName"), //表名称
                CreateYearList: this.GetGroupDict("ReportYear"), //周期
                CycleList: this.GetGroupDict("ReportCycle"), //
                TabTitleList: [], //tab选项卡列表
                selectTabName: '',
                showType: false, //编辑框状态开关
                ViewType: false, //查看框状态开关
                TableHeader: [{
                        title: '报表名称',
                        key: 'ReportCodeName',
                        ellipsis: true
                    },
                    {
                        title: '归属地区',
                        key: 'AreaCodeName',
                        width: 200
                    },
                    {
                        title: '填报年度',
                        key: 'FillInYearName',
                        width: 110
                    },
                    {
                        title: '填报周期',
                        key: 'TimesTypeName',
                        width: 110
                    },
                    {
                        title: '周期详情',
                        key: 'TimesCycleName',
                        width: 110
                    },
                    {
                        title: '审核意见',
                        key: 'Opinion',
                        width: 150,
                        ellipsis: true
                    },
                    {
                        title: "报表状态",
                        key: "StatusName",
                        width: 110,
                        render:(h,params)=>{
                            switch (params.row.Status * 1) {
                                case 0: //审核未通过
                                    return h('span',{class:{Error:true}},params.row.StatusName);
                                case 1: //未填报
                                    return h('span',{class:{NoReport:true}},params.row.StatusName);
                                case 2: //已填报
                                    return h('span',{class:{AlreadyReport:true}},params.row.StatusName);
                                case 3: //已上报
                                    return h('span',{class:{UpReport:true}},params.row.StatusName);                                    
                                case 4: //审核通过
                                    return h('span',{class:{Success:true}},params.row.StatusName);                                    
                                case 5: //锁定
                                    return h('span',{class:{error:true}},params.row.StatusName);                                    
                                default:
                                    return h('span',{class:{Default:true}},params.row.StatusName);                                    
                            }
                        }
                    },
                    {
                        title: '添加时间',
                        key: 'StrAddTime',
                        width: 200
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 240,
                        align: 'center',
                        render:(h,params)=>{
                            switch (params.row.Status * 1) {
                                case 0: //审核未通过
                                        return h('div', [
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.See(params.row.Id,params.row.ReportCode); }}}, '查看'),
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id,params.row.ReportCode); }}}, '填报'),
                                        h('Button', {class:{ieditColor:true}, attrs:{disabled:true},props: {type:'ghost',size:'small',icon:'arrow-up-a'},on: {click: () => {this.DataUp(params.row.Id,'3',''); }}}, '上报')
                                    ]);
                                case 1: //未填报
                                     return h('div', [
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.See(params.row.Id,params.row.ReportCode); }}}, '查看'),
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id,params.row.ReportCode); }}}, '填报'),
                                        h('Button', {class:{ieditColor:true}, attrs:{disabled:true},props: {type:'ghost',size:'small',icon:'arrow-up-a'},on: {click: () => {this.DataUp(params.row.Id,'3',''); }}}, '上报')
                                    ]);
                                case 2: //已填报
                                    return h('div', [
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.See(params.row.Id,params.row.ReportCode); }}}, '查看'),
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id,params.row.ReportCode); }}}, '填报'),
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'arrow-up-a'},on: {click: () => {this.DataUp(params.row.Id,'3',''); }}}, '上报')
                                    ]);
                                case 3: //已上报
                                     return h('div', [
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.See(params.row.Id,params.row.ReportCode); }}}, '查看'),
                                        h('Button', {class:{ieditColor:true},attrs:{disabled:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id,params.row.ReportCode); }}}, '填报'),
                                        h('Button', {class:{ieditColor:true},attrs:{disabled:true}, props: {type:'ghost',size:'small',icon:'arrow-up-a'},on: {click: () => {this.DataUp(params.row.Id,'3',''); }}}, '上报')
                                    ]);                                   
                                case 4: //审核通过
                                    return h('div', [
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.See(params.row.Id,params.row.ReportCode); }}}, '查看'),
                                        h('Button', {class:{ieditColor:true}, attrs:{disabled:true},props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id,params.row.ReportCode); }}}, '填报'),
                                        h('Button', {class:{ieditColor:true}, attrs:{disabled:true},props: {type:'ghost',size:'small',icon:'arrow-up-a'},on: {click: () => {this.DataUp(params.row.Id,'3',''); }}}, '上报')
                                    ]);                                 
                                case 5: //锁定
                                     return h('div', [
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.See(params.row.Id,params.row.ReportCode); }}}, '查看'),
                                        h('Button', {class:{ieditColor:true}, attrs:{disabled:true},props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id,params.row.ReportCode); }}}, '填报'),
                                        h('Button', {class:{ieditColor:true}, attrs:{disabled:true},props: {type:'ghost',size:'small',icon:'arrow-up-a'},on: {click: () => {this.DataUp(params.row.Id,'3',''); }}}, '上报')
                                    ]);                               
                                default:
                                     return h('div', [
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.See(params.row.Id,params.row.ReportCode); }}}, '查看'),
                                        h('Button', {class:{ieditColor:true}, props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id,params.row.ReportCode); }}}, '填报'),
                                        h('Button', {class:{ieditColor:true}, attrs:{disabled:true},props: {type:'ghost',size:'small',icon:'arrow-up-a'},on: {click: () => {this.DataUp(params.row.Id,'3',''); }}}, '上报')
                                    ]);                                 
                            }
                        }
                    }
                ],
                //查询模型：根据需求删除不不要查询条件
                //蔬菜生产情况表代码
                searchModel: {
                    Id: '',
                    ReportCode: 'VegProSurvey',
                    FillInYear: '',
                    TimesType: '',
                    AreaCode: '',
                    PageNumber: 1,
                    PageSize: 20,
                    Status: '',
                    Opinion: ''
                },
                pageSizeOpts: [20, 40, 50], //默认分页最大设置
                datas: {}, //table数据对象
                dataIds: [],
                ctx: this, //table数据上下文
                clientHeight: window.innerHeight - 270, //表格默认高度
            }
        },
        mounted() {
            //table高度计算方法
            const that = this;
            window.onresize = () => {
                return (() => {
                    that.clientHeight = window.innerHeight - 220;
                })()
            };
        },
        computed: { //蔬菜累计播种面积合计
            VegArea: {
                get: function() {
                    return Number(this.VegBasicModel.PerennialArea) + Number(this.VegBasicModel.SeasonArea) + Number(this.VegBasicModel.LiquidArea);
                },
                set: function(newValue) { //参数不能少
                    this.VegBasicModel.VegArea = newValue; //a的值变化也会导致b变化
                }
            }
        },
        methods: {
            See: function(id, reportCode) { //数据查看
                var self = this;
                self.$http.get("Report", {
                    params: {
                        id: id,
                        reportCode: reportCode
                    }
                }).then( //获取数据编辑项的值
                    function(res) {
                        switch (res.data.list.status) {
                            case 1:
                                self.initTab(self, res.data.list.model);
                                self.ViewType = true;
                                break;
                            case 0:
                                self.$Modal.error({
                                    title: "提示信息",
                                    content: "数据加载失败!!!"
                                });
                                break;
                            case -1:
                                self.$Modal.error({
                                    title: "提示信息",
                                    content: "数据加载失败!!!"
                                });
                                break;
                        }
                    }
                );
            },
            getTab(name) { //获取当前tab
                this.selectTabName = name;
            },
            //查看报表
            showInfo(id, reportCode) {
            },
            //获取当前页码
            getPageNumber(pageIndex) {
                this.searchModel.PageNumber = pageIndex;
                this.getPageData();
            },
            //获取当前分页大小
            getPageSize(pageSize) {
                this.searchModel.PageSize = pageSize;
                this.getPageData();
            },
            //获取this.datas: {},//table数据对象
            getPageData() {
                var self = this;
                var user = this.GetlocaStorage("VegUserInfo");
                this.searchModel.AreaCode = user.AreaCode;
                self.$http.post('Report/PostPageList', this.searchModel).then(function(res) {
                    if (res.data.status === 1) {
                        self.datas = res.data;
                    } else {
                        self.$Modal.error({
                            title: '提示信息',
                            content: res.data.message
                        });
                    }
                });
            },
            //编辑获取对象传入id
            Edit: function(id, reportCode) {
                var self = this;
                this.$http.get("Report", {
                    params: {
                        id: id,
                        reportCode: reportCode
                    }
                }).then( //获取数据编辑项的值
                    function(res) {
                        switch (res.data.list.status) {
                            case 1:
                                self.initTab(self, res.data.list.model);
                                self.modalShow();
                                self.selectTabName = self.TabTitleList[0].SortCode;
                                break;
                            case 0:
                                self.$Modal.error({
                                    title: "提示信息",
                                    content: "编辑数据加载失败!!!"
                                });
                                break;
                            case -1:
                                self.$Modal.error({
                                    title: "提示信息",
                                    content: "编辑数据加载失败!!!"
                                });
                                break;
                        }
                    }
                );
            },
            initTab(self, datas) {
                self.TabTitleList = [];
                for (var i = 0; i < datas.length; i++) {
                    if (!self.checkTab(datas[i].SortCode, self)) {
                        var item = new Object();
                        item.SortCode = datas[i].SortCode;
                        item.SortName = datas[i].SortName;
                        item.list = [];
                        for (var j = 0; j < datas.length; j++) {
                            if (datas[j].SortCode == datas[i].SortCode) {
                                if (!self.checkItem(item.list, datas[j].ItemCode)) {
                                    item.list.push(datas[j]);
                                }
                            }
                        }
                        self.TabTitleList.push(item);
                    }
                }
                return self.TabTitleList;
            },
            checkTab(SortCode, self) {
                var res = false;
                for (var i = 0; i < self.TabTitleList.length; i++) {
                    if (self.TabTitleList[i].SortCode == SortCode) {
                        res = true;
                    }
                }
                return res;
            },
            checkItem(datas, ItemCode) {
                var res = false;
                for (var i = 0; i < datas.length; i++) {
                    if (datas[i].ItemCode == ItemCode) {
                        res = true;
                    }
                }
                return res;
            },
            //删除对象
            Delete(id) {
                var self = this;
                self.$Modal.confirm({
                    title: '提示信息',
                    content: '<p>数据删除后不可恢复，确定要删除？</p>',
                    onOk: () => {
                        this.$http.delete("GenerateLog", {
                            params: {
                                id: id
                            }
                        }).then(
                            function(res) {
                                if (res.data.status == 1) {
                                    self.$Notice.success({
                                        title: '删除成功！',
                                        desc: false
                                    });
                                    self.getPageData();
                                } else {
                                    self.$Modal.error({
                                        title: "提示信息",
                                        content: "数据删除失败!!!"
                                    });
                                }
                            }
                        );
                    }
                });
            },
            //保存方法
            save() {
                var self = this;
                var list = this.findItemList(this.selectTabName);
                this.$http.put('VegProSurvey', list).then(
                    function(res) {
                        if (res.data.status == 1) {
                            self.getPageData(); //读取分页数据
                            self.$Notice.success({
                                title: '保存成功！',
                                desc: false
                            });
                        } else {
                            self.$Modal.warning({
                                title: "提示信息",
                                content: "更新失败,请与管理员联系!"
                            });
                        }
                    });
            },
            findItemList(tabname) {
                var list = [];
                for (var i = 0; i < this.TabTitleList.length; i++) {
                    if (this.TabTitleList[i].SortCode == tabname) {
                        list = this.TabTitleList[i].list;
                        break;
                    }
                }
                return list;
            },
            //数据上报
            DataUp: function(ReportId, Status, Msg) {
                var self = this;
                self.searchModel.Id = ReportId;
                self.searchModel.Status = Status;
                self.searchModel.Opinion = Msg;
                self.$Modal.confirm({
                    title: '提示信息',
                    content: '<p>数据上报后，不能再更改，是否继续上报？</p>',
                    onOk: () => {
                        self.$http.post('Report/PostUpStatus', self.searchModel).then(function(res) {
                            if (res.data.status === 1) {
                                self.$Notice.success({
                                    title: '数据上报成功',
                                    desc: false
                                });
                                self.searchModel.Status = '';
                                self.getPageData(); //读取分页数据
                            } else {
                                self.$Notice.success({
                                    title: '数据上报失败',
                                    desc: res.data.messages
                                });
                            }
                        });
                    },
                    onCancel: () => {}
                });
            },
            //编辑框打开
            modalShow() {
                this.showType = true;
            },
            //编辑框关闭
            modalHide() {
                this.showType = false;
            },
            //取消方法
            cancel() {
                this.showType = false; //关闭modal
                this.TabTitleList = [];
            },
            //重置model
            restModel(modelname) {
                this.$refs[modelname].resetFields(); //重置model
            },
            //全选方法
            selectAll(selection) {
                this.dataIds = selection;
            },
            //checkbox选中方法
            selectSingel(selection, row) {
                this.dataIds = selection;
            },
            //checkbox取消选中方法
            selecChange(selection) {
                this.dataIds = selection;
            },
            //批量删除
            multiSelect() {
                var self = this;
                if (this.dataIds.length !== 0) {
                    self.$Modal.confirm({
                        title: '提示信息',
                        content: '<p>数据删除后不可恢复，确定要删除？</p>',
                        onOk: () => {
                            var ids = this.getDataIds(this.dataIds);
                            this.$http.post("GenerateLog/PostBatchDelete", ids).then(
                                function(res) {
                                    if (res.data.status == 1) {
                                        self.dataIds = [];
                                        self.$Notice.success({
                                            title: '删除成功！',
                                            desc: false
                                        });
                                        self.getPageData();
                                    } else {
                                        self.$Modal.error({
                                            title: "提示信息",
                                            content: "数据删除失败!!!"
                                        });
                                    }
                                }
                            );
                        }
                    });
                } else {
                    self.$Modal.warning({
                        title: "提示信息",
                        content: "请选择需要删除的数据!"
                    });
                }
            },
            getDataIds(idList) {
                var ids = [];
                if (idList.length !== 0) {
                    for (var i = 0; i < idList.length; i++) {
                        ids.push(idList[i].Id);
                    }
                }
                return ids;
            }
        },
        //创建Vue页面方法
        created: function() {
            //创业Vue前调用获取this.datas: {},//table数据对象
            this.getPageData();
        },
        watch: {
            //需要监听的在此处新增监听对象
        }
    }
</script>
